<template>
    <div class="main">
        <div ref="stickyHeader">
            <div v-sticky>
                <navTop></navTop>
                <div class="contentboxset">
                    <div class="breadBox"
                        :style="screenWidth > 1400 ? 'width:1400px;' : 'width:1200px;min-width:1200px;'">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item>作业</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/gradescoreindex' }">成绩管理</el-breadcrumb-item>
                            <el-breadcrumb-item>本次错题</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </div>
                <div class="maincontentbox1" :style="screenWidth > 1400 ? 'width:1400px;' : 'width:1200px'">
                    <div class="searchlist">
                        <div style="display: flex;align-items: center;">
                            <span style="font-size:14px;color:#2A303B;">得分率：</span>
                            <div class="elinput" style="display: flex;align-items: center;">
                                <el-input v-model="rateLeft" style="width:80px;"
                                    @keypress.native="(e) => /[0-9]/.test(e.key) || e.preventDefault()"
                                    @input="val => handleStartInput(val, 'startdfscore')"
                                    :class="{ 'error-border': !isValidStart }" @change="handleStartChange"></el-input>
                                <b style="padding:0 8px;display: inline-block;">-</b>
                                <el-input v-model="rateRight" style="width:80px;"
                                    @keypress.native="(e) => /[0-9]/.test(e.key) || e.preventDefault()"
                                    @input="val => handleEndInput(val, 'endedfscore')"
                                    :class="{ 'error-border': !isValidEnd }" @change="handleEndChange"></el-input>
                            </div>
                            <el-select v-model="questionTypeName" placeholder="请选择题型" @click="questiontypeChange"
                                clearable>
                                <el-option v-for="item in difficultylist" :key="item" :label="item" :value="item">
                                </el-option>
                            </el-select>
                            <!-- <el-select v-model="gradeId" placeholder="请选择预设难度" @focus="gradelistfocus" @change="gradelistchange" clearable>
                                <el-option
                                key="0"
                                label="全部"
                                value="0">
                                </el-option>
                                <el-option
                                v-for="item in gradelist"
                                :key="item.gradeId"
                                :label="item.name"
                                :value="item.gradeId">
                                </el-option>
                            </el-select> -->
                        </div>
                    </div>
                </div>
                <div class="maincontentbox2" :style="screenWidth > 1400 ? 'width:1400px;' : 'width:1200px'">
                    <div class="searchlist">
                        <p class="titledata"><i>日常作业</i>{{ $route.query.title }}（共{{ questionarrylist.length }}题）</p>
                    </div>
                </div>
            </div>
            <div class="maincontentbox" :style="screenWidth > 1400 ? 'width:1400px;' : 'width:1200px'">
                <div class="questionbox" v-for="(item, index) in questionarrylist">
                    <div style="display: flex;justify-content:right;align-items: center;position:relative;height:38px;">
                        <h3 class="titlebox">
                            {{ item.questionInfo && item.questionInfo[0]
                                ? (item.questionInfo.length > 1
                                    ? '第' + item.questionInfo[0].questionNum.split('-')[0] + '题'
                                    : item.questionInfo[0].questionNum)
                                : '未命名题目' }}
                        </h3>
                        <div class="boxcenterbutton">
                            <!-- <span @click="answerclick(index)">答案解析<i :class="answerclickindex==index?'el-icon-arrow-up hover':'el-icon-arrow-up'"></i></span>
                            <span @click="scoreclick(index)">得分明细<i :class="scoreclickindex==index?'el-icon-arrow-up hover':'el-icon-arrow-up'"></i></span> -->
                            <!-- <span>选中加练<i class="el-icon-circle-check"></i></span> -->
                            <span @click="answerclick(index)">答案解析<i class="el-icon-arrow-up"
                                    :class="{ 'hover': item.questionIshow }"></i></span>
                            <span @click="scoreclick(index)">得分明细<i class="el-icon-arrow-up"
                                    :class="{ 'hover': item.questionScore }"></i></span>
                        </div>
                    </div>
                    <div style="padding:0 14px 24px;">
                        <div class="questionscore" style="padding:15px 0 15px;">
                            <div v-for="scoreaya in item.questionInfo" style="padding:5px 0">
                                <span v-if="item.questionInfo.length > 1" style="padding-right:10px;">题号：{{
                                    scoreaya.questionNum.split('-')[1] }}{{ scoreaya.questionNum.split('-')[2] }}</span>
                                <span>满分：<i>{{ scoreaya.fullScore }}分</i></span>、
                                <span>班平均分：<i>{{ scoreaya.avgScore }}分</i></span>、
                                <span>最高分：<i>{{ scoreaya.maxScore }}分</i></span>、
                                <span>最低分：<i>{{ scoreaya.minScore }}分</i></span>、
                                <span>班得分率：<i>{{ scoreaya.scoreRate }}%</i></span>
                            </div>
                        </div>
                        <!-- 题干 -->
                        <!-- 显示父级题干 -->
                        <div v-if="item.parentContent" v-html="item.parentContent"></div>
                        <div v-html="item.contentPageShow" style="font-size:14px;"></div>
                        <div v-if="item.optionPageShowList" style="font-size:14px;"><span
                                v-for="(option, index) in item.optionPageShowList"
                                style="display: flex;font-size:14px;">{{
                                    index == 0 ? 'A' : index == 1 ? 'B' : index == 2 ? 'C' : index == 3 ? 'D'
                                        : index == 4 ? 'E' : index == 5 ? 'F' : 'G' }}、<i v-html="option"
                                    style="font-style:normal;"></i></span></div>
                        <div style="font-size:14px;">
                            <div v-for="chil in item.children">
                                <div v-html="chil.contentPageShow"></div>
                                <!-- <div v-show="item.questionIshow">
                                    <div style="display:flex;padding-top:25px;font-size:14px;" v-if="chil.answerList">
                                        <b style="color:rgb(79,204,248);font-size:14px;">【答案】</b><div v-for="answer in  chil.answerList" style="font-size:14px;"><div v-html="answer"></div></div>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                        <!-- 答案解析 -->
                        <div v-show="item.questionIshow">
                            <div style="display:flex;padding-top:25px;" v-if="item.answerList">
                                <b style="color:rgb(79,204,248);font-size:14px;">【答案】</b>
                                <div v-for="answ in item.answerList" style="font-size:14px;">
                                    <div v-html="answ"></div>
                                </div>
                            </div>
                            <div style="display:flex;padding-top:10px;">
                                <b style="color:rgb(79,204,248);font-size:14px;">【解析】</b>
                                <div v-html="item.analysisPageShow" style="font-size:14px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="boxulxd" v-show="item.questionScore">
                        <div v-for="(people, index) in item.details">
                            <div style="font-size:14px;">
                                <!-- 添加安全判断 -->
                                {{ item.details.length < 2 ? '' : (item.questionInfo[index] ?
                                    item.questionInfo[index].questionNum.split('-').slice(1).join('') : '') }} </div>
                                    <li v-for="pchil in people">{{ pchil.scoreRange ? pchil.scoreRange : '空' }}：<b
                                            v-for="(name, nameindex) in pchil.students">{{ name.name }}<i
                                                v-if="nameindex < pchil.students.length - 1">、</i></b>({{ pchil.count
                                                }}人占{{ pchil.percentage }}%)
                                    </li>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
import navTop from "../../components/homework/headtop.vue"
import empty from '../../components/school/empty.vue'
import { questionlist, questionlistuuid, questionlistscoreuuid, get } from '../../request/api.js'
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            startdfscore: '',
            endedfscore: '',
            examType: '',
            gradeId: '',
            questionarrylist: [],
            questionUUids: [],
            isValidStart: true,
            isValidEnd: true,
            classifylist: [],
            difficultylist: [],
            rateLeft: undefined,
            rateRight: undefined,
            questionTypeName: '',
            scoreclickindex: -1,
            answerclickindex: -1,
            questionnewlist: []
        }
    },
    mounted() {
        this.questionbank()
        this.renderMathJax()
        this.$nextTick(() => {
            // 手动触发滚动事件，让指令重新计算位置
            window.dispatchEvent(new Event('scroll'));
        });
    },
    computed: {
        ...mapGetters(['getScreenWidth']),
        screenWidth() {
            return this.getScreenWidth;
        },
    },
    updated() {
        this.renderMathJax()
    },
    methods: {
        async renderMathJax() {
            if (window.MathJax && window.MathJax.typesetPromise) {
                try {
                    await window.MathJax.typesetPromise();
                } catch (err) {
                    console.error('MathJax typesetting failed:', err);
                }
            }
        },
        // renderMathJax() {
        //     if (window.MathJax) {
        //         window.MathJax.typesetPromise(); // 重新渲染所有公式
        //     }
        // },
        // 新增校验方法
        handleStartInput(val, field) {
            // 移除非数字字符
            let num = val.replace(/[^\d]/g, '')
            num = num === '' ? '' : Math.min(100, Math.max(1, num))
            this[field] = num.toString()
            // 触发结束值的校验
            if (this.endedfscore) this.isValidEnd = this.endedfscore >= num
        },
        handleEndInput(val, field) {
            // 移除非数字字符
            let num = val.replace(/[^\d]/g, '')
            num = num === '' ? '' : Math.min(100, Math.max(1, num))
            this[field] = num.toString()
            // 触发开始值的校验
            if (this.startdfscore) this.isValidStart = this.startdfscore <= num
        },
        handleEndChange(val) {
            if (this.rateLeft) {
                this.selectboxlist()
            } else {
                this.$message.error('请选择开始得分率')
            }

        },
        handleStartChange(val) {
            this.selectboxlist()
        },
        questiontypeChange() {
            // 当清空题型时主动触发筛选
            if (!this.questionTypeName) {
                this.selectboxlist()
            }
            // 原有筛选逻辑保持不变
            this.selectboxlist()
        },
        answerclick(index) {
            this.questionarrylist[index].questionIshow = !this.questionarrylist[index].questionIshow
            this.answerclickindex = index
            this.$nextTick(() => {
                const selector = `.questionbox:nth-child(${index + 1}) .boxulxd`;
                const element = document.querySelector(selector);
                if (element) {
                    // 方案1：直接滚动到元素
                    element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

                    // 方案2：自定义偏移（如需）
                    // const offset = element.getBoundingClientRect().top + window.scrollY - 100;
                    // window.scrollTo({ top: offset, behavior: 'smooth' });
                }
            });
        },
        scoreclick(index) {
            this.questionarrylist[index].questionScore = !this.questionarrylist[index].questionScore
            this.scoreclickindex = index
            this.$nextTick(() => {
                const selector = `.questionbox:nth-child(${index + 1}) .boxulxd`;
                const element = document.querySelector(selector);
                if (element) {
                    // 方案1：直接滚动到元素
                    element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

                    // 方案2：自定义偏移（如需）
                    // const offset = element.getBoundingClientRect().top + window.scrollY - 100;
                    // window.scrollTo({ top: offset, behavior: 'smooth' });
                }
            });
        },
        // 获取题库
        questionbank() {
            let subjectid = {
                examCourseId: this.$route.query.courseid,
            }
            get('/work/questionids', subjectid).then(uuid => {
                // //console.info(uuid)
                if (uuid.code == 200) {
                    let obj = {
                        questionUUids: uuid.data
                    }
                    questionlist('/system/question/info/list/ids', obj).then(res => {
                        // //console.info(res)
                        if (res.code == 200) {
                            this.difficultylist = [...new Set(res.data
                                .map(item => item.difficulty)  // 提取difficulty字段
                                .filter(Boolean)               // 过滤空值
                            )]
                            // 创建第一个数据集
                            const questions = res.data.map(item => ({
                                ...item,
                                questionIshow: false, // 添加新参数
                                questionScore: false
                            }))
                            this.questionnewlist = questions
                            this.contactarrayclick(questions)
                        }
                    })
                }
            })
        },
        selectboxlist() {
            let objs = {
                classId: this.$route.query.classId,
                questionId: 0,
                rateLeft: this.rateLeft || undefined,
                rateRight: this.rateRight || undefined,
                questionTypeName: this.questionTypeName || undefined, // 确保传undefined
            }
            questionlistscoreuuid(`/api/score/error-distribution-detail/list/${this.$route.query.examId}`, objs)
                .then(scoreRes => {
                    if (scoreRes.code === 200) {
                        this.questionarrylist = this.mergeData(scoreRes.data, this.questionnewlist)
                        // 新增：更新sessionStorage为最新数据
                        sessionStorage.setItem('questionarrylist', JSON.stringify(this.questionnewlist))
                    }
                })
        },
        // 过滤合并数组
        contactarrayclick(content) {
            let objs = {
                classId: this.$route.query.classId,
                questionId: 0,
                rateLeft: this.rateLeft ? this.rateLeft : undefined,
                rateRight: this.rateRight ? this.rateRight : undefined,
                questionTypeName: this.questionTypeName ? this.questionTypeName : undefined,
            }
            questionlistscoreuuid(`/api/score/error-distribution-detail/list/${this.$route.query.examId}`, objs)
                .then(scoreRes => {
                    if (scoreRes.code === 200) {
                        this.questionarrylist = this.mergeData(scoreRes.data, content)
                        sessionStorage.setItem('questionarrylist', JSON.stringify(this.questionarrylist))
                    }
                })
        },
        mergeData(data1, data) {
            if (!data1 || data1.length === 0) {
                return data.map(item => ({
                    ...item,
                    parentContent: item.children ? item.contentPageShow : null, // 只在有子题时设置父级内容
                    parentAnalysis: item.children ? item.analysisPageShow : null, // 父级解析（新增）
                    questionInfo: [],
                    details: [],
                    questionIshow: false,  // 添加新参数
                    questionScore: false   // 添加新参数
                }));
            }

            const questionMap = new Map();
            const buildQuestionMap = (items, parentContent = null, parentAnalysis = null) => { // 初始父级内容为null
                items.forEach(item => {
                    // 只有当父级内容存在时继承，否则保持null
                    const inheritedContent = parentContent || (item.children ? item.contentPageShow : null);
                    const inheritedAnalysis = parentAnalysis || (item.children ? item.analysisPageShow : null);
                    questionMap.set(item.uuid, {
                        ...item,
                        parentContent: inheritedContent,
                        parentAnalysis: inheritedAnalysis,  // 父级解析（用于子题）
                        questionInfo: [],
                        details: [],
                        questionIshow: false,  // 添加新参数
                        questionScore: false,  // 添加新参数
                        analysisPageShow: item.analysisPageShow || inheritedAnalysis || null,
                    });

                    if (item.children) {
                        // 传递当前题干的contentPageShow给子题，无论子题是否为空
                        buildQuestionMap(item.children, item.contentPageShow, item.analysisPageShow);
                    }
                });
            };
            buildQuestionMap(data);

            // 填充筛选数据
            data1.forEach(scoreItem => {
                const target = questionMap.get(scoreItem.questionUUid);
                if (target) {
                    // 合并题目信息
                    target.questionInfo.push({
                        ...scoreItem.questionInfo,
                        questionNum: scoreItem.questionNum
                    });

                    // 合并得分明细（保持数组结构）
                    target.details.push(scoreItem.details.map(detail => ({
                        ...detail,
                        // 处理可能的空值
                        students: detail.students || [],
                        scoreRange: detail.scoreRange || '空'
                    })));
                }
            });

            // 转换映射为数组并排序
            return Array.from(questionMap.values())
                .filter(item => {
                    // 添加空值兜底
                    if (!item.questionInfo) item.questionInfo = []
                    return item.questionInfo.length > 0 || item.isMainQuestion
                })
                .sort((a, b) => {
                    // 安全获取题号数字
                    const getNum = (item) => {
                        const questionInfo = item.questionInfo && item.questionInfo[0];
                        const questionNum = questionInfo ? questionInfo.questionNum : '';
                        const matches = questionNum ? questionNum.match(/\d+/g) : null;
                        return matches ? parseInt(matches[0]) : 0;
                    };

                    return getNum(a) - getNum(b);
                });
        },

        // 修改后的contactarrayclick方法
        contactarrayclick(content) {
            let objs = {
                classId: this.$route.query.classId,
                questionId: 0,
                // 修改参数传递逻辑，确保空值时传undefined
                rateLeft: this.rateLeft || undefined,
                rateRight: this.rateRight || undefined,
                questionTypeName: this.questionTypeName || undefined,
            };

            questionlistscoreuuid(`/api/score/error-distribution-detail/list/${this.$route.query.examId}`, objs)
                .then(scoreRes => {
                    if (scoreRes.code === 200) {
                        // 使用深拷贝避免原始数据污染
                        const mergedData = this.mergeData(scoreRes.data, JSON.parse(JSON.stringify(content)));
                        this.questionarrylist = mergedData;

                        // 添加调试日志
                        //console.log('Merged Data Structure:', {
                        //    inputData: scoreRes.data,
                        //    mergedResult: mergedData,
                        //    originalData: content
                        // });

                        sessionStorage.setItem('questionarrylist', JSON.stringify(mergedData));
                        this.$nextTick(this.renderMathJax);
                    }
                });
        },
        getQuestionNumber(question) {
            const questionNum = question.questionInfo[0].questionNum || '';
            // 匹配数字部分（如 "单选题-1" 提取 1）
            const match = questionNum.match(/-(\d+)$/);
            return match ? parseInt(match[1], 10) : 0;
        }
    },
    components: { navTop, empty },
    beforeDestroy() {
        sessionStorage.removeItem('questionarrylist')
    }
}
</script>

<style scoped>
.main {
    width: 100vw;
    height: 100vh;
    background: #F4F7FD;
    overflow-x: auto;

    overflow-y: auto;
}

.contentboxset {
    background: #fff;
    height: 32px;
    border-top: solid 2px #F4F7FD;
    display: flex;
}

.breadBox {
    width: 1400px;
    margin: 0 auto;
    min-width: 1200px;
    line-height: 32px;
    align-self: center;
}

.el-breadcrumb {
    width: auto;
    margin: 0 auto;
    line-height: 30px;
    font-size: 14px;
}

.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
    color: #B3B8C2
}

.breadBox>>>.el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__inner.is-link {
    font-weight: normal
}

.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
    font-weight: bold
}

.header {
    background-color: #f8f8f8;
    text-align: center;
    transition: all 0.3s ease;
    /* 添加过渡效果 */
}

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 吸顶时添加阴影 */
}

.maincontentbox {
    background: #F4F7FD;
    box-sizing: border-box;
    width: 1400px;
    min-width: 1200px;
    margin: 0 auto;
    padding-left: 11px;
    
}

.maincontentbox1 {
    background: #F4F7FD;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0 15px;
    width: 1400px;
    min-width: 1200px;
    margin: 0 auto
}

.maincontentbox2 {
    background: #F4F7FD;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 15px;
    width: 1400px;
    min-width: 1200px;
    margin: 0 auto
}

.maincontent {
    width: 100%;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 24px;
    padding: 24px;
}

.searchlist {
    box-sizing: border-box;
    width: 1400px;

    display: flex;
    justify-content: space-between;
    height: 54px;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 0 24px;
    align-items: center;
    margin: 0 auto;
}

.searchlist a {
    display: block;
    color: #557292;
    font-size: 14px;
    width: 100px;
    text-align: center;
    position: relative;
    line-height: 52px;
}

.searchlist a:hover,
.searchlist a.hover {
    color: #295CFF;
}

.searchlist a:hover::after,
.searchlist a.hover::after {
    content: '';
    width: 24px;
    height: 4px;
    background: #295CFF;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.searchlist .el-select {
    width: 144px;
    margin-right: 24px;
}

.searchlist>>>.el-input__inner {
    width: 144px;
    border-radius: 10px;
    height: 35px;
    font-size: 14px;
}

.searchlist>>>.el-input__icon {
    line-height: 35px;
}

.searchlist .elinput>>>.el-input__inner {
    width: 80px;
    border: solid 1px #D8E4F0
}

.elinput {
    margin-right: 24px;
}

.titledata {
    font-size: 14px;
    color: #2A303B;
    font-weight: bold;
}

.titledata i {
    display: inline-block;
    width: 68px;
    height: 24px;
    background: #295CFF;
    border: 1px solid #295CFF;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    margin-right: 10px;
    font-weight: normal
}

.questionbox {
    box-sizing: border-box;
    width: auto;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 15px 0 0;
    align-items: center;
    margin: 14px 0px 0;
    position: relative
}

.questionbox a {
    display: block;
    color: #557292;
    font-size: 14px;
    width: 100px;
    text-align: center;
    position: relative;
    line-height: 52px;
}

.questionbox a:hover,
.questionbox a.hover {
    color: #295CFF;
}

.questionbox a:hover::after,
.questionbox a.hover::after {
    content: '';
    width: 24px;
    height: 4px;
    background: #295CFF;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.questionbox .el-select {
    width: 144px;
    margin-right: 24px;
}

.questionbox>>>.el-input__inner {
    width: 144px;
    border-radius: 10px;
    height: 35px;
    font-size: 14px;
}

.questionbox>>>.el-input__icon {
    line-height: 35px;
}

.questionbox .elinput>>>.el-input__inner {
    width: 80px;
    border: solid 1px #D8E4F0
}

.titlebox {
    height: 38px;
    background: #295CFF;
    border-radius: 0 100px 100px 0;
    font-size: 18px;
    color: #fff;
    position: absolute;
    left: -10px;
    top: 0px;
    font-weight: 500;
    line-height: 38px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.titlebox::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    left: 0px;
    bottom: -10px;
    background: url('../../assets/image/school/sjd.jpg') no-repeat;
}

.questionscore {
    font-size: 16px;
    color: #5B6371;
    font-style: normal;
    padding-top: 8px;
}

.questionscore i {
    display: inline-block;
    color: #2A303B;
    font-style: normal
}

.boxcenterbutton {
    display: flex;
    justify-content: right;
    border-radius: 0 0 10px 10px;
    padding: 0 15px 0 0;
}

.boxcenterbutton span {
    display: inline-block;
    width: 104px;
    height: 34px;
    background: #295CFF;
    border-radius: 10px;
    text-align: center;
    line-height: 34px;
    font-size: 14px;
    color: #fff;
    margin-left: 14px;
    cursor: pointer;
}

.boxcenterbutton span i {
    display: inline-block;
    margin-left: 5px;
    transition: all .3s;
}

.boxcenterbutton span i.hover {
    transform: rotate(180deg);
}

.boxcenterbutton span:nth-child(2) {
    background: none;
    border: solid 1px #295CFF;
    color: #295CFF
}

.boxulxd {
    padding: 0 14px 5px;
}

.boxulxd li {
    box-sizing: border-box;
    width: 100%;
    background: rgb(247, 249, 255);
    border-radius: 6px;
    margin-bottom: 10px;
    color: Rgb(114, 121, 133);
    font-size: 14px;
    line-height: 30px;
    padding: 0 10px;
}

/* 在style区域添加 */
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spin {
    -moz-appearance: textfield;
}
</style>